﻿<!--<tab  heading="需求详细管理" [active]="active" (selectTab)="active = true" 
    (deselect)="active = false" removable="true" customClass="m-tabs__item">-->
    <form class="horizontal-form" autocomplete="off">
        <div class="m-form m-form--label-align-right"> 
            <div class="row align-items-center m--margin-bottom-10">
                <div class="col-xl-12">
                    <div class="form-group m-form__group align-items-center">
                        <div class="input-group">
                            <input [(ngModel)]="filterText" name="filterText" autoFocus class="form-control m-input"  [placeholder]="l('SearchWithThreeDot')" type="text">
                            <span class="input-group-btn">
                                <button (click)="getRequirementItems()" class="btn btn-primary" type="submit"><i class="flaticon-search-1" [attr.aria-label]="l('Search')"></i></button>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <div class="row margin-bottom-10">
        <div class="col-xl-6">
            <p>权限列表</p>
        </div>
        <div class="col-xl-6 text-right">
            <button  class="btn btn-primary" (click)="createOrEditRequirementItem()"><i class="fa fa-edit"></i>新增</button>
        </div>
    </div>
    <div class="row">
        <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
            <p-table #dataTable (onLazyLoad)="getRequirementItems($event)"
                [value]="primengTableHelper.records"
                rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false" [lazy]="true"
                [scrollable]="true" ScrollWidth="100%" [responsive]="primengTableHelper.isResponsive"
                [resizableColumns]="primengTableHelper.resizableColumns">
                <ng-template pTemplate="header">
                    <tr>
                        <th style="width: 130px"
                            [hidden]="!isGrantedAny('Pages.Administration.Users.Impersonation', 'Pages.Administration.Users.Edit', 'Pages.Administration.Users.ChangePermissions', 'Pages.Administration.Users.Delete')">
                            {{'Actions' | localize}}
                        </th>
                        <th style="width: 300px">
                            序号
                        </th>
                        <th style="width: 300px" pSortableColumn="role">
                            角色
                            <p-sortIcon field="role"></p-sortIcon>
                        </th>
                        <th style="width: 300px" pSortableColumn="userId">
                            账号
                            <p-sortIcon field="userId"></p-sortIcon>
                        </th>
                        <th style="width: 300px" pSortableColumn="userName">
                            姓名
                            <p-sortIcon field="userName"></p-sortIcon>
                        </th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-record="$implicit" let-rowIndex="rowIndex">
                    <tr>
                        <td style="width: 130px"
                            [hidden]="!isGrantedAny('Pages.Administration.Users.Impersonation', 'Pages.Administration.Users.Edit', 'Pages.Administration.Users.ChangePermissions', 'Pages.Administration.Users.Delete')">
                            <div class="btn-group dropdown" dropdown container="body">
                                <button dropdownToggle class="dropdown-toggle btn btn-sm btn-primary">
                                    <i class="fa fa-cog"></i><span class="caret"></span> {{"Actions" | localize}}
                                </button>
                                <ul class="dropdown-menu" *dropdownMenu>
                                    <!--<li *ngIf="('Pages.Administration.Users.Edit' | permission)  ">
                                        <a href="javascript:;" (click)="createOrEditRequirementItem(record)">编 辑</a>
                                    </li>-->
                                    <li *ngIf="('Pages.Administration.Users.Edit' | permission)  ">
                                        <a href="javascript:;" (click)="deleteRoleUserById(record)">删 除</a>
                                    </li>
                                </ul>
                            </div>
                        </td>
                        <td style="width: 300px">
                            <span class="ui-column-title">序号</span>
                            {{rowIndex + 1}}
                        </td>
                        <td style="width: 300px">
                            <span class="ui-column-title">角色</span>
                            {{getRoleName(record.role)}}
                        </td>
                        <td style="width: 300px">
                            <span class="ui-column-title">账号</span>
                            {{record.userId}}
                        </td>
                        <td style="width: 300px">
                            <span class="ui-column-title">姓名</span>
                            {{record.userName}}
                        </td>
                    </tr>
                </ng-template>
            </p-table>
            <div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
                {{'NoData' | localize}}
            </div>
            <div class="primeng-paging-container">
                <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                    (onPageChange)="getRequirementItems($event)"
                    [totalRecords]="primengTableHelper.totalRecordsCount"
                    [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">

                </p-paginator>
                <span class="total-records-count">
                    {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
                </span>
            </div>
        </div>
    </div>
    <auditAuthorityTabEditComponent #auditAuthorityTabEditComponent  (modalSave)="getRequirementItems()"></auditAuthorityTabEditComponent>
<!--</tab>-->